{extend name='public/base' /}
{block name='content'}
{include file='public/content_header' /}
<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <!-- 表单头部 -->
                <div class="box-header with-border">
                    <div class="btn-group">
                        <a class="btn flat btn-sm btn-default BackButton">
                            <i class="fa fa-arrow-left"></i>
                            返回
                        </a>
                    </div>
                </div>
                <!-- 表单 -->
                <form id="dataForm" class="form-horizontal dataForm" action="" method="post"
                      enctype="multipart/form-data" onkeydown="if(event.keyCode===13){return false;}">
                    <!-- 表单字段区域 -->
                    <div class="box-body">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">细项名称</label>
                            <div class="col-sm-10 col-md-4">
                                <input id="name" name="name" value="{$data.name|default=''}" placeholder="请输入细项名称"
                                       type="text" class="form-control field-text">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="col-sm-2 control-label">金额类型</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="type" id="type" class="form-control field-select"
                                        data-placeholder="请选择金额类型">
                                    <option value=""></option>
                                    <option value="1" {if isset($data) && $data.type =='固定金额'}selected{/if}>固定金额</option>
                                    <option value="2" {if isset($data) && $data.type =="工资比例"}selected{/if}>工资比例</option>
                                    <option value="3" {if isset($data) && $data.type =="其他"}selected{/if}>其他</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="type" class="col-sm-2 control-label">计薪方式</label>
                            <div class="col-sm-10 col-md-4">
                                <select name="salary_menu" id="salary_menu" class="form-control field-select"
                                        data-placeholder="请选择计薪方式">
                                    <option value=""></option>
                                    {foreach name='salary_menu' id='item'}
                                    <option value="{$item.salary_name}" {if isset($data) &&
                                            $data.salary_menu==$item.salary_name}selected{/if}>
                                        {$item.salary_name}
                                    </option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>
                        <script>
                            $('#type').select2();
                            $('#salary_menu').select2();
                        </script>
                        <div class="form-group">
                            <label for="fixed_money" class="col-sm-2 control-label">固定金额</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="fixed_money" name="fixed_money"
                                           value="{$data.fixed_money|default=''}" placeholder="请输入固定金额"
                                           type="number" class="form-control field-number">
                                    <span class="input-group-addon">元</span>
                                </div>
                            </div>
                        </div>
                        <script>
                            // $('#fixed_money')
                            //     .bootstrapNumber({
                            //         upClass: 'success',
                            //         downClass: 'primary',
                            //         center: true
                            //     });
                        </script>
                        <div class="form-group">
                            <label for="salary_scale" class="col-sm-2 control-label">占工资比例</label>
                            <div class="col-sm-10 col-md-4">
                                <div class="input-group">
                                    <input id="salary_scale" name="salary_scale"
                                           value="{$data.salary_scale|default=''}" placeholder="请输入占工资比例"
                                           type="number" class="form-control field-number">
                                    <span class="input-group-addon">%</span>
                                </div>
                            </div>
                        </div>
                        <script>
                            // $('#salary_scale')
                            //     .bootstrapNumber({
                            //         upClass: 'success',
                            //         downClass: 'primary',
                            //         center: true
                            //     });
                        </script>

                    </div>
                    <!-- 表单底部 -->
                    <div class="box-footer">
                        {:token()}
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10 col-md-4">
                            {if !isset($data)}
                            <div class="btn-group pull-right">
                                <label class="createContinue">
                                    <input type="checkbox" value="1" id="_create" name="_create"
                                           title="继续添加数据">继续添加</label>
                            </div>
                            {/if}
                            <div class="btn-group">
                                <button type="submit" class="btn flat btn-info dataFormSubmit">
                                    保存
                                </button>
                            </div>
                            <div class="btn-group">
                                <button type="reset" class="btn flat btn-default dataFormReset">
                                    重置
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
<script>
    /** 表单验证 **/
    $(function () {
        console.log(window.location.href);
        let url = window.location.href;
        var flag = true;
        if (url.indexOf('edit')>=0){
             flag = false;
        }
        if ($("#type").val()==='1'){
            $('#salary_scale').val('');
            $('#salary_scale').attr('readonly',true);
            $('#fixed_money').attr('readonly',false);
        }
        if ($("#type").val()==="2"){
            $('#fixed_money').val('');
            $('#fixed_money').attr('readonly',true);
            $('#salary_scale').attr('readonly',false);
        }
        if ($("#type").val()==="3"){
            $('#fixed_money').val('');
            $('#fixed_money').attr('readonly',true);
            $('#salary_scale').val('');
            $('#salary_scale').attr('readonly',true);
        }
        //金额类型选择
        $("#type").change(function () {
            if ($(this).val()==='1'){
                $('#salary_scale').val('');
                $('#salary_scale').attr('readonly',true);
                $('#fixed_money').attr('readonly',false);
            }
            if ($(this).val()==="2"){
                $('#fixed_money').val('');
                $('#fixed_money').attr('readonly',true);
                $('#salary_scale').attr('readonly',false);
            }
            if ($(this).val()==="3"){
                $('#fixed_money').val('');
                $('#fixed_money').attr('readonly',true);
                $('#salary_scale').val('');
                $('#salary_scale').attr('readonly',true);
            }
        })
        //检验是否重复
        jQuery.validator.addMethod("checkname", function (value, element) {
            var resultval = false;
            jQuery.ajax({
                type: 'post',
                async:false,
                data:{'name':value},
                url: "{:url('salaryDetailMenu/nameUnique')}",
                dataType: 'json',
                success: function (result) {
                if (result.code == 0) {
                    resultval = false;
                }
                else {
                    resultval = true;
                }
            },
            error: function () {
            }
        });
            return resultval;

        }, "您的名称重复，请重新输入");
        $('#dataForm').validate({

            // submitHandler: function (form) {
            //     console.log($(form).serializeArray());
            //
            //     alert("提交事件!");
            //     return false;
            //     form.submit();
            // },
            // debug:true,
            onkeyup:false,
            focusInvalid:false,
            rules: {
                'name': {
                    required: true,
                    checkname:flag
                },
                'salary_menu':{
                    required:true,
                },
                'fixed_money': {
                    required: function (){
                        return $("#type").val()==='1';
                    }
                },
                'salary_scale': {
                    required: function (){
                        return $("#type").val()==='2';
                    }
                },
                'type' : {
                    required: true,
                }
            },
            messages: {
                'name': {
                    required: "细项名称不能为空",
                    checkname: '名称已存在',
                },
                'salary_menu': {
                    required: "请选择计薪方式",
                },
                'fixed_money': {
                    required: "固定金额不能为空",
                },
                'salary_scale': {
                    required: "占工资比例不能为空",
                },
                'type' : {
                    required: '请选择金额类型',
                }

            },
        });
    });

</script>
{/block}